<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <school></school>
        <hello></hello>

        <!-- 组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的
        页面上使用时候，Vue解析时会帮我们创建实例对象，就是Vue帮我们执行：new VueComponent(options)
        注意：每次调用Vue.extend时候返回的是一个全新的VueComponent
        
        组件配置中的data、methods、watch、computed中的函数，它们的this是VueComponent实例对象
        new Vue() 配置中的data、methods、watch、computed中的函数，它们的this是Vue实例对象

        VueComponent 的实例对象，简称vc，也称为组件实例对象
        Vue 的实例对象，检查vm

        vm里面管理着vc -->

    </div>


</body>
<script type="text/javascript">


    const school = Vue.extend({
        template: `
            <div>
                <h2>名称：{{schoolName}}</h2>
                <h2>地址：{{address}}</h2>
            </div>
        `,
        data() {
            return {
                schoolName: '上海',
                address: '浦东新区',
            }
        }
    })

    const hello = Vue.extend({
        template: `
            <h2>{{msg}}</h2>
        `,
        data() {
            return {
                msg: 'hello...'
            }
        }
    })

    // 控制台查看
    console.log('-----------', school);
    console.log('-----------', hello);
    console.log('-----------', hello == school);

    const vm = new Vue({
        el: "#root",
        components: {
            school,
            hello
        }
    })
</script>

</html>